.recordPanelContainer {
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.recordPanel {
	pointer-events: auto;
	box-sizing: border-box;
	height: 40px;
	padding: 4px;
	min-width: 3em;
	background-color: #2228;
	backdrop-filter: blur(10px);
	border-radius: 1000px;
	display: flex;
	align-items: center;
	gap: 0.5em;
	overflow-y: hidden;
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.5),
		0 0 0 1px #fff2,
		0 0 0 2px rgba(0, 0, 0, 0.5),
		inset 0 0 0 1px #fff2;

	& > button {
		aspect-ratio: 1 / 1;
		height: 100%;
		background-color: transparent;
		border: none;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: none;

		&:hover {
			box-shadow:
				0 0 0 2px rgba(0, 0, 0, 0.25),
				inset 0 0 0 1px #fff2;
			background-color: #fff1;
		}
	}
}

.preview {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
	border-radius: 1000px;
	height: 95%;
	pointer-events: none;

	overflow: hidden;
}
